<template>
    <up-gap height="2" bgColor="#f5f5f5"></up-gap>
    
    <tr-card margin="0 0 12rpx" :padding="padding">
        <view v-if="false" class="content-box">
            <view class="left-box">
                <view class="item card-row">
                    <view class="checkbox">
                        <slot name="checkbox"></slot>
                    </view>
                    <view class="index-box">{{ index }}</view>
                    <text class="label">{{$t("common.orderNumber")}}：</text>
                    <text class="value">
                        <up-copy content="uview-plus is great !">
                            <text class="blue-text">点击复制点击复制点击复制</text>
                        </up-copy>
                    </text>
                </view>
                <view class="item card-row">
                    <text class="label">预定人姓名：</text>
                    <text class="value">张三张三张三张三张三张三张三张三张三张三</text>
                </view>
                <view class="item card-row">
                    <text class="label">电话：</text>
                    <text class="value">234234234</text>
                </view>
                <view class="item card-row">
                    <text class="label">邮箱：</text>
                    <text class="value">234234234</text>
                </view>
                <view class="item card-row">
                    <text class="label">WhatsApp：</text>
                    <text class="value">234234234</text>
                </view>
            </view>
            <view class="right-box">
                <view class="item card-row">
                    <text class="label">类型：</text>
                    <text class="value">234234234</text>
                </view>
                <view class="item card-row">
                    <text class="label">数量：</text>
                    <text class="value">234234234</text>
                </view>
                <view class="item card-row">
                    <text class="label">集合点：</text>
                    <text class="value">心意管理过程东门</text>
                </view>
                <view class="hotel-box">
                    <slot name="hotel"></slot>
                </view>
            </view>
        </view>
        <view v-else>
            <view class="card-row">
                <slot name="checkbox"></slot>
                <view class="index-box">{{ index }}</view>
                <text class="label">{{$t("common.orderNumber")}}：</text>
                <text class="value">
                    <up-copy content="uview-plus is great !">
                        <text class="blue-text">点击复制点击复制点击复制</text>
                    </up-copy>
                </text>
            </view>
            <view class="card-row">
                <view class="label">
                    {{$t("common.reservationPerson")}}：
                </view>
                <view class="value">MARK KAMENETSKY</view>
            </view>
            <view class="content-box">
                <view class="card-row left-box">
                    <view class="label">{{$t("common.phone")}}：</view>
                    <view class="value">17897897897</view>
                </view>
                <view class="card-row right-box">
                    <view class="label">{{$t("common.type")}}：</view>
                    <view class="value">英文</view>
                </view>
            </view>
            <view class="content-box">
                <view class="card-row left-box">
                    <view class="label">{{$t("common.email")}}：</view>
                    <view class="value">12345678978@qq.com</view>
                </view>
                <view class="card-row right-box">
                    <view class="label">{{$t("common.number")}}：</view>
                    <view class="value">123</view>
                </view>
            </view>
            <view class="content-box">
                <view class="card-row left-box">
                    <view class="label">WhatsApp：</view>
                    <view class="value">123456789</view>
                </view>
                <view class="card-row right-box">
                    <slot name="hotel"></slot>
                </view>
            </view>
            <view class="card-row">
                <view class="label">{{$t("common.meetingPoint")}}：</view>
                <view class="value">心意管理过程东门心意管理过程东门心意管理过程东门</view>
            </view>
        </view>
        
        <!--        TODO : 添加阅读全文-->
        <!--        <up-read-more ref="uReadMoreRef" :toggle="true" :showHeight="200" textIndent="0">-->
        <!--            {{content}}-->
        <!--        </up-read-more>-->
        <view class="red-text">
            {{ content }}
        </view>
        
        <view class="tags-box">
            <up-tag v-for="(item,index) in tagsList" :key="index" :text="item.text"
                    type="warning" plain>
            </up-tag>
        </view>
        <view class="btn-box grid-gap24">
            <view>
                <uni-badge size="small" :text="100" absolute="rightTop" type="error">
                    <!--发送邮件-->
                    <up-tag :text="$t('common.sendEmail')" shape="circle" size="large"></up-tag>
                </uni-badge>
            </view>
            <view>
                <!--未进群-->
                <up-tag :text="$t('common.notGroup')" shape="circle" size="large"></up-tag>
            </view>
            <view>
                <!--未联系-->
                <up-tag :text="$t('common.notContacted')" shape="circle" size="large"></up-tag>
            </view>
            <view>
                <uni-badge size="small" :text="100" absolute="rightTop" type="error">
                    <!--签到-->
                    <up-tag :text="$t('common.signIn')" shape="circle" size="large" @tap="signIn"></up-tag>
                </uni-badge>
            </view>
            <view>
                <!--未到-->
                <up-tag :text="$t('common.notYet')" shape="circle" size="large" @tap="notYetArrived"></up-tag>
            </view>
            <view>
                <!--上报凭证-->
                <up-tag :text="$t('common.reportVoucher')" shape="circle" size="large" @tap="submitVouchers(VouchersTypeEnum.view.submit,item)"></up-tag>
            </view>
            <view>
                <!--查看凭证-->
                <up-tag :text="$t('common.viewVoucher')" shape="circle" size="large" @tap="submitVouchers(VouchersTypeEnum.view.value,item)"></up-tag>
            </view>
        </view>
    </tr-card>
</template>
<script setup>
import {VouchersTypeEnum} from '@/enums/order'

const emits = defineEmits(['submitVouchers', 'viewVoucher'])
const props = defineProps({
    padding: {
        type: String,
        default: '24rpx'
    },
    item: {
        type: Object,
        default: () => {
        }
    },
    index: {
        type: Number,
        default: 0
    }
})

const eadMoreRef = ref()
const content = ref(
        '备注：我这边需要导游中英文都结合讲解下我这边需要导游中英文都结合讲解下我这边需要导游中英文都结合讲解下')

const tagsList = [
    {
        text: '选项1',
        plain: true,
        type: 'warning',
        name: 1
    },
    {
        text: '选项2',
        plain: true,
        type: 'warning',
        name: 2
    },
    {
        text: '选项3',
        plain: true,
        type: 'warning',
        name: 3
    },
    {
        text: '选项4',
        plain: true,
        type: 'warning',
    }
]
// 上报凭证
const submitVouchers = (type,item) => {
    emits('submitVouchers', type,item)
}

// 签到
const signIn = () => {
    qly.dialog.toast({
        title: '签到成功'
    })
}

// 未到
const notYetArrived = () => {
    qly.dialog.toast({
        title: '请尽快上传未到具体原因'
    })
}
</script>
<style scoped lang="scss">
.btn-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18rpx;
}

.content-box {
    display: flex;
    
    .left-box, .right-box {
    }
    
    .left-box {
        flex: 2;
        flex-shrink: 0;
    }
    
    .right-box {
        flex: 1;
        flex-shrink: 0;
        
        .hotel-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 24rpx auto 0;
        }
    }
}

.index-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    border: 1rpx solid #000;
    border-radius: 50%;
    margin: 8rpx 8rpx 0 8rpx;
}

.tags-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24rpx;
    margin: 24rpx 0;
}
</style>
